<template>
  <div id="app-page" ref="appPage">

  <div ip="header-part">
    <service-header msg="hotel service helper"></service-header>
  </div>


  <div ip="body-part" class="body-part">
    <div ip="set-body">
      <br><br><br><br><br><br>
      <!-- 通过router选择显示的子界面 -->
      <router-view/>

      <img alt="Vue logo" src="./assets/blank.png" height="20%">

    </div>
  </div>

  <div ip="input-part">
    <!-- 根据获取到的数据标签，将inputbar接收到的消息通过函数receiveDataFromInputbar保存到变量message中 -->
    <input-bar
      @data-from-inputbar-p="receiveDataFromInputbar"
      @data-from-inputbar-g="receiveDataFromInputbar"
      ></input-bar>
  </div>

  </div>
</template>

<script>
  //引入网页标题子组件、输入框子组件
  import  InputBar  from '@/components/InputBar.vue'
  import  ServiceHeader  from '@/components/ServiceHeader.vue'

  export default {
    components: { 
      InputBar,
      ServiceHeader,
    },

    data(){
      return{
        // getOneChatMsg: {
        //   type:"0",
        //   message:"[default]",
        // },
        // //测试，连接后端之后request需要移动到getOneChatMsg之内
        // request:'default',
      }
    },

    methods:{
      // //从inputbar子组件获取输入内容到getOneChatMsg中
      // receiveDataFromInputbar(payload){
      //   this.getOneChatMsg=payload;
      //   console.log(this.getOneChatMsg);
      //   this.sendMsgToChatView();
      // },
      // //将获取的输入消息保存到./store/index.js中，由ChatView进行读取
      // sendMsgToChatView(){
      //   if(this.getOneChatMsg.message=='[default]')
      //     return;

      //   //测试，手动修改request的值，待删
      //   if(this.getOneChatMsg.type=='0')
      //     this.request=this.getOneChatMsg.message;

      //   //传输消息
      //   this.$store.dispatch('sendMessage',{
      //     text: this.getOneChatMsg.message,
      //     receiver: this.getOneChatMsg.type=='1',
      //     //测试，待改
      //     request: this.request,
      //   });

      //   //初始化，防止消息重复渲染
      //   this.getOneChatMsg={
      //     type:'0',
      //     message:'[default]',
      //   };
      //   if(this.getOneChatMsg.type=='1')
      //     this.request="default";
      // },
    },
  }

</script>


<style scoped>
/*子页面居中排布*/
.body-part{
  display: flex;
  justify-content: center;
}
</style>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>
